<template>
  <div class="container__banner">
    <div
      class="container__banner__item"
      v-for="(item, index) of bannerIcon"
      :key="index"
    >
      <div
        class="container__banner__item__icon iconfont"
        v-html="item.icon"
      ></div>
      <div class="container__banner__item__content">{{ item.text }}</div>
    </div>
  </div>
</template>
<script setup>
const bannerIcon = [
  {
    icon: "&#xe67a;",
    text: "我的病历",
  },
  {
    icon: "&#xe67e;",
    text: "开处方",
  },
  {
    icon: "&#xe678;",
    text: "门诊预约",
  },
  {
    icon: "&#xe67c;",
    text: "患教文章",
  },
];
</script>
<style lang="scss" scoped>
.container__banner {
  display: flex;
  justify-content: space-between;
  width: 376rem;
  margin: 20rem 0;
  &__item {
    width: 64rem;
    height: 75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    &__icon {
      font-size: 40rem;
      color: #0088dc;
    }
    &__content {
      font-size: 13rem;
      color: #101010;
    }
  }
}
</style>
